<div>
  <div ng-if="!ruleEditorIsOpen" class="protractor-test-edit-rule"
       ng-class="{'oppia-editable-section': isEditable}">

    <div class="oppia-interactive-section-click-handler" ng-click="openRuleEditor()">
    </div>

    <h3 style="margin-bottom: 10px;" ng-if="heading"><[heading]> <span ng-if="isEditable" class="glyphicon glyphicon-pencil oppia-editor-edit-icon" title="Edit Rule"></span></h3>
    <div>
      <div class="row oppia-readonly-rule-container">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="oppia-rule-sort-handle" ng-if="!isDefaultRule() && numRules() && numRules() > 2">
            <span class="glyphicon glyphicon-sort oppia-rule-sort-arrows"></span>
          </div>

          <div class="container-fluid">
            <div class="row oppia-readonly-rule-tile well well-sm">
              <div class="col-lg-8 col-md-8 col-sm-8" style="margin-left: -5px;">
                <span>
                  <span ng-if="rule.description !== 'Default'" style="word-wrap: break-word;">
                    <span ng-if="!answerChoices">
                      If <[rule | parameterizeRuleDescription: answerChoices]> ...
                    </span>
                    <span ng-if="answerChoices">
                      If <span angular-html-bind="rule | parameterizeRuleDescription: answerChoices"></span>...
                    </span>
                  </span>
                  <span ng-if="rule.description === 'Default'">
                    If no other rules apply...
                  </span>
                </span>

                <ul ng-if="isRuleConfusing() || rule.feedback.length > 0">
                  <li>
                    <span ng-if="isRuleConfusing()">
                      <span class="glyphicon glyphicon-warning-sign"></span>
                      <span class="oppia-rule-warning-text">
                        Please provide a feedback message.
                      </span>
                    </span>
                    <span ng-if="rule.feedback.length > 0" style="word-wrap: break-word;">
                      <span angular-html-bind="rule.feedback[0]"></span>
                      <span ng-if="rule.feedback.length > 1">(+ <[rule.feedback.length - 1]> variation<span ng-if="rule.feedback.length > 2">s</span>)</span>
                    </span>
                  </li>
                </ul>
              </div>

              <div class="col-lg-4 col-md-4 col-sm-4">
                Destination: <br>
                <span ng-if="rule.dest !== getActiveStateName()">
                  <span class="glyphicon glyphicon-arrow-right"></span>
                  <a ng-click="navigateToRuleDest()" ng-if="rule.dest !== 'END'" class="oppia-rule-dest-link">
                    <[rule.dest]>
                  </a>
                  <span ng-if="rule.dest === 'END'">END</span>
                </span>
                <span>
                  <span ng-if="rule.dest === getActiveStateName()">⟳ <[rule.dest]></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="isEditable && ruleEditorIsOpen" class="oppia-rule-editable-view">
    <div class="oppia-rule-bubble">
      <span ng-if="rule.description !== 'Default'">
        <form class="form-inline" role="form">
          Answer
          <rule-type-selector class="protractor-test-rule-description" all-rule-types="allRuleTypes" local-value="$parent.$parent.currentRuleDescription" on-selection-change="onSelectNewRuleType()">
          </rule-type-selector>

          <span ng-repeat="item in ruleDescriptionFragments track by $index" class="form-group">
            <span ng-if="item.type == 'select'" style="color: black;">
              <select class="form-control" ng-model="rule.definition.inputs[item.varName]" ng-options="choice.id as (choice.val|convertRuleChoiceToPlainText|truncate) for choice in ruleDescriptionChoices">
              </select>
            </span>

            <span ng-if="item.type != 'select' && item.type != 'noneditable'">
              <object-editor obj-type="<[item.type]>" is-editable="isEditable" always-editable="true" value="rule.definition.inputs[item.varName]" style="color: black;"></object-editor>
            </span>
            <span ng-if="item.type == 'noneditable'">
              <[item.text]>
            </span>
          </span>
        </form>
      </span>

      <span ng-if="rule.description === 'Default'">
        If no other rules apply...
      </span>
    </div>

    <div class="oppia-feedback-and-dest" ng-class="{'oppia-lightly-grayed': isTmpRule()}">
      <div class="oppia-feedback-bubble">
        <span ng-if="rule.feedback.length > 0">
          Feedback
          <span ng-if="rule.feedback.length > 1">
            (<em>one variation is chosen at random</em>):
          </span>
        </span>
        <span ng-if="rule.feedback.length == 0">
          <em>No feedback specified.</em>
        </span>

        <schema-based-editor schema="RULE_FEEDBACK_SCHEMA" local-value="$parent.rule.feedback">
        </schema-based-editor>
      </div>

      <div class="oppia-dest-bubble">
        <div class="oppia-align-center">
          <strong>Destination:</strong><br />
          <select2-dropdown width="150" item="rule.dest" choices="destChoices" placeholder="Type destination state name" new-choice-regex="^[A-Z a-z0-9\.]+$" dropdown-css-class="oppia-rule-dest-select2" format-new-selection="convertNewDestToText" invalid-search-term-message="Invalid state name">
          </select2-dropdown>
          <span ng-if="rule.dest == stateName"> ⟳ </span><br />
        </div>
      </div>
    </div>

    <div class="oppia-rule-save-cancel-buttons">
      <button type="button" class="btn btn-success protractor-test-save-rule" ng-disabled="!rule.description" ng-click="saveThisRule()">Save Rule</button>
      <button type="button" class="btn btn-default" ng-click="cancelThisEdit()">Cancel</button>
      <button type="button" class="btn btn-danger pull-right protractor-test-delete-rule" ng-if="!isDefaultRule() && !isTmpRule()" ng-click="deleteThisRule()">Delete Rule</button>
    </div>
  </div>
</div>
